<template>
  <!-- 我的喜欢 -->
  <view style="padding-top: 30rpx">
    <view class="watch_list" v-if="list.length > 0">
      <VideoCard  v-for="(item,index) in list" :key="index" :item="item"/>
    </view>
    <view style="margin-top: 200rpx" v-if="list.length === 0">
      <u-empty
          mode="list"
          icon="/static/personal/notData.png"
          textSize="36"
          iconSize="160"
          text="暂无记录"
      >
      </u-empty>
      <view class="btn" @click="goTheater">去剧场</view>
    </view>
  </view>

</template>

<script>
import {
  Api
} from '../../service/api'
import VideoCard from "../../components/videoCard.vue";
export default {
  components: {VideoCard},
  data() {
    return {
      pageObj: {
        pageSize: 9,
        pageNum: 0,
        status: 'loading'
      },
      list: [],
    }
  },
  onReachBottom() {
    this.getList()
  },
  onLoad(op){
    this.getList()
    if(op.current) this.current = Number(op.current)
  },
  methods: {
    goTheater(){
      uni.switchTab({
        url: '/pages/benefit/index'
      })
    },
    getList(){
      if(this.pageObj.status === 'nomore') return
      this.pageObj.status = 'loading'
      Api.getMyLikePageList({
        pageNo: ++ this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
      }).then(res=>{
        this.list = this.list.concat(res.data.list)
        if(this.list.length < res.data.total)  this.pageObj.status = 'loadmore'
        else this.pageObj.status = 'nomore'
        console.log(this.list)
      })
    }
  }
}
</script>


<style lang="less">

.watch_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18rpx;
  margin: 15rpx 30rpx 0;
  border-radius: 20rpx;
}

.btn{
  margin: 50rpx auto 0;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  border: 2rpx #E81F4B solid;
  color: #E81F4B;
  font-size: 28rpx;
  height: 50rpx;
}

</style>
